import React, { useEffect, useState } from 'react'
import { DeleteOutlined, EditOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import { Table, Button, Modal, Tree } from 'antd'
import axios from 'axios';

const { confirm } = Modal;
export default function RoleList() {
    // 管理人员数据
    const [dataSource, setdataSource] = useState([])
    // 菜单功能数据
    const [rightList, setRightList] = useState([])
    // 是否显示弹窗
    const [isModalVisible, setisModalVisible]=useState(false)
    // 管理人员权限地址
    const [currentRight, setcurrentRight]=useState([])
    const [currentId, setcurrentId]=useState(0)

    useEffect(() => {
        axios("/roles").then(res => {
            setdataSource(res.data)
        })
    }, [])
    useEffect(() => {
        axios("/rights?_embed=children").then(res => {
            setRightList(res.data)
        })
    }, [])

    const confirmMethod = (item) => {
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            // content: 'When clicked the OK button, this dialog will be closed after 1 second',
            onOk() {
                deleteMethod(item)
            },

            onCancel() {
                // console.log('取消');
            },
        });
    }

    const deleteMethod = (item) => {
            setdataSource(dataSource.filter(data => data.id !== item.id))
            // axios.delete(`http://localhost:5000/roles/${item.id}`)
    }

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            },
        },
        {
            title: '角色管理',
            dataIndex: 'roleName',

        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
                    <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={()=>{
                        // 弹窗显示
                        setisModalVisible(true)
                        // 获取被选中管理人地址
                        setcurrentRight(item.rights)
                        // 获取被选中管理人id
                        setcurrentId(item.id)
                    }}/>
                </div>
            },
        },
    ];

    // 点击确定
    const handleOk=()=>{
        setisModalVisible(false)
        // 同步数据
        setdataSource(dataSource.map(item=>{
            if(item.id===currentId){
                return {
                    ...item,
                    rights: currentRight
                }
            }
            return item
        }))

        axios.patch(`/roles/${currentId.id}`,{
            rights: currentRight
        })
    }
    // 点击取消
    const handleCancel = () => {
        setisModalVisible(false)
    }

    // 获取选项数据
    const getItem = (data)=>{
        data.map(item=>{
            item.title=item.label
            if(item.children?.length>0){
                item.children.map(items=>{
                    items.title = items.label
                    return items
                })
            }else{
                delete item.children
            }
            return item
        })
        return data
    }
    // 点击是否勾选
    const onCheck=(checkedKeys)=>{
        // checkedKeys.checked剩余的currentRight
        setcurrentRight(checkedKeys.checked)
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 5,
            }} rowKey={(item) => item.id} />
            <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Tree
                    checkable
                    // 初始数据
                    treeData={getItem(rightList)}
                    // 是否选中,受控
                    checkedKeys={currentRight}
                    onCheck={onCheck}
                    // 取消父子关联
                    checkStrictly={true}
                />
            </Modal>
        </div>
    )
}
